<script setup>
import { ref,onMounted } from "vue";
import {Search, Tickets} from "@element-plus/icons-vue";
import {fetchMarketingBrandList,deleteMarketingBrand,createMarketingBrand,updateMarketingBrandSort} from "@/api/marketingBrand.js";

const searchForm = ref();
const formData = ref({
  name: "",
  type: ""
});
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  brandName: null,
  recommendStatus: null
};
const defaultRecommendOptions = [
  {
    label: '未推荐',
    value: 0
  },
  {
    label: '推荐中',
    value: 1
  }
];
const listQuery = Object.assign({}, defaultListQuery, {})
const recommendOptions = Object.assign({}, defaultRecommendOptions, {})
const operates = [
  { label: "设为推荐", value: 0 },
  { label: "取消推荐", value: 1 },
  { label: "删除", value: 2 }
]
const operateType = ref(null);

onMounted(() => {
  getBrandRecommendList();
})

// 获取品牌推荐列表
const brandRecList = ref([]);
const total = ref(0);
const getBrandRecommendList = async () => {
  const res = await fetchMarketingBrandList(listQuery);
  brandRecList.value = res.data.data.list;
  total.value = res.data.data.total;
}

// 搜索查询
const handleSearch = () => {
  listQuery.brandName = formData.value.name;
  listQuery.recommendStatus = formData.value.type;
  getBrandRecommendList();
}
// 重置搜索
const handleResetSearch = () => {
  formData.value = {
    name: "",
    type: ""
  };
  listQuery.brandName = null;
  listQuery.recommendStatus = null;
  getBrandRecommendList();
}

// TODO: 分页操作方法
const handleSizeChange = (size) => {
  listQuery.pageNum = 1;
  listQuery.pageSize = size;
  getBrandRecommendList();
}
const handleCurrentChange = (val) => {
  listQuery.pageNum = val;
  getBrandRecommendList();
}

</script>

<template>
  <div class="brand-recommend">
    <!-- 搜索框 -->
    <div class="spikes-search">
      <div class="logo">
        <div class="logo-text">
          <el-icon>
            <Search/>
          </el-icon>
          <span>筛选搜索</span>
        </div>
        <div class="search-btn">
          <el-button type="primary" @click="handleSearch">查询结果</el-button>
          <el-button icon="refresh" @click="handleResetSearch">重置</el-button>
        </div>
      </div>
      <div class="search">
        <el-form :inline="true" ref="searchForm" v-model="formData" label-width="100px">
          <el-form-item label="品牌名称:">
            <el-input v-model="formData.name" placeholder="请输入搜索" clearable></el-input>
          </el-form-item>
          <el-form-item label="推荐状态：">
            <el-select v-model="formData.type" placeholder="全部" clearable class="input-width">
              <el-option v-for="item in recommendOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 品牌列表 -->
    <div class="add-list">
      <div class="add-btn">
        <el-icon>
          <Tickets/>
        </el-icon>
        <span>数据列表</span>
      </div>
      <el-button type="primary" icon="plus" style="margin-left: 20px;" @click="handleSelectBrand()">
        选择品牌
      </el-button>
    </div>
    <!-- 商品列表 -->
    <div class="spikes-table">
      <el-table :data="brandRecList" border style="width: 100%;">
        <el-table-column type="selection" width="100" align="center"></el-table-column>
        <el-table-column label="编号ID" align="center">
          <template #default="{row}">
            {{ row.id }}
          </template>
        </el-table-column>
        <el-table-column label="品牌名称" align="center">
          <template #default="{row}">
            {{ row.brandName }}
          </template>
        </el-table-column>
        <el-table-column label="是否推荐" align="center">
          <template #default="{row}">
            <el-switch
                @change="handleRecommendStatusStatusChange(row)"
                :active-value="1"
                :inactive-value="0"
                v-model="row.recommendStatus">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center">
          <template #default="{row}">
            {{ row.sort }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="{row}">
            {{ row.status === 1 ? '未推荐' : '推荐中' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button icon="setting" @click="handleEditSort(row)">设置排序</el-button>
            <el-button type="danger" icon="delete" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-bar">
      <div class="select-type">
        <span>批量操作：</span>
        <el-select v-model="operateType" placeholder="请选择操作">
          <el-option
              v-for="item in operates"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-button
            style="margin-left: 20px"
            @click="handleBatchOperate()"
            type="primary"
            size="small">
          确定
        </el-button>
      </div>
      <el-pagination
          background
          layout="total, sizes,prev, pager, next,jumper"
          :total="total"
          :page-sizes="[5,10,15,20]"
          v-model:page-size="listQuery.pageSize"
          v-model:current-page="listQuery.pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<style scoped lang="scss">
.brand-recommend {
  margin-top: 20px;
  display: flex;
  flex-direction: column;

  .spikes-search {
    //height: 100px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;

    .logo {
      width: 100%;
      font-size: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        margin: 0 8px;
      }

      .search-btn {
        margin-left: 30px;
        padding: 0 10px;
      }
    }

    .search {
      width: 100%;

      .el-form {
        margin-top: 20px;

        .el-form-item {
          width: 280px;
        }
      }
    }
  }

  .add-list {
    //height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;

    .add-btn {
      display: flex;
      align-items: center;

      span {
        margin-left: 8px;
        font-size: 18px;
      }
    }
  }

  .page-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    padding: 10px 20px;
    border: 1px solid #d5d5d5;

    .select-type {
      width: 400px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    span {
      width: 150px;
    }
  }
}

</style>